let id = new URLSearchParams(location.search).get('id');

// -------------------------获取分类，处理下拉框--------------------
$.ajax({
    url: '/my/category/list',
    success: function(res) {
        // console.log(res);
        if (res.status === 0) {
            let str = template('tpl-category', res);
            // res.data.forEach(item => {
            //     str += `<option value="${item.id}">${item.name}</option>`
            // });
            $('select[name="cate_id"]').html(str);
            // 动态创建的下拉框、单项按钮、复选按钮，需要更新渲染
            let form = layui.form;
            // form.render('select','表单的lay-filter属性的值');
            form.render('select');
            $.ajax({
                url: '/my/article/' + id,
                success: function(res) {

                    // 数据回填
                    form.val('article', res.data);
                    let imgUrl = baseUrl + '/' + res.data.cover_img;
                    image.cropper('destroy').attr('scr', imgUrl).cropper(option)
                }
            })
        }
    }
})

// -------------------------富文本编辑器--------------------
initEditor();







// ----------封面图片处理-----------
// ----------初始化剪裁框-----------
let image = $('#image');
let option = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

image.cropper(option);



// ----------点击上传，能够触发文件域单击事件-----------
// button:contains("标签的内容")--------查找包含“内容”的标签
$('button:contains("选择封面")').on('click', function() {
    $('#file').trigger('click');
})

// ----------更换剪裁区的图片-----------
$('#file').on('change', function() {
    // console.dir(this);
    if (this.files.length > 0) {
        let fileObj = this.files[0];
        let url = URL.createObjectURL(fileObj);
        // image.cropper('replace', url);
        image.cropper('destroy').attr('src', url).cropper(option);
    }
})





// --------------------------
// --------上面是处理图片-----
// --------------------------

// 先抛开插件的使用，直接添加
// 1. 自己手动修改几个分类
// 2. 文章封面，自己加一个文件域
// 3. 把各项的name属性修改成和接口要求的参数名一致
$('form').on('submit', function(e) {
    e.preventDefault();
    let fd = new FormData(this); // 一开始只有title cate_id和state是正常的
    // 单独处理content
    fd.set('content', tinyMCE.activeEditor.getContent());

    // 剪裁图片，把剪裁后的结果加到fd中
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
    // 通过toBlob方法可以把canvas转成Blob对象的格式
    canvas.toBlob(function(blob) {
        // 参数blob就是转换后的结果，我们把这个结果加到fd中
        fd.append('cover_img', blob);
        // 追加Id
        fd.append('id', id);
        // 检查FormData对象中的数据，直接输入fd是看不到数据的，需要通过foreach遍历。查看fd中的数据
        fd.forEach((value, key) => {
            console.log(key, value);
        });

        $.ajax({
            url: '/my/article/update',
            type: 'POST',
            data: fd,

            contentType: false,
            processData: false,
            success: function(res) {
                console.log(res);
                if (res.status === 0) {
                    layer.msg(res.message, { time: 1500 }, function() {
                        location.href = './list.html'
                            // window.parent.document.querySelector('#add').click()
                    })
                }
            }
        })
    })


})